<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>交集选择器(Intersection Selector)</title>
  <!-- 
    CSS的交集选择器（intersection selector）用于选择同时满足多个条件的元素。
    语法：选择器1选择器2选择器3选择器4...选择器n
    注意：交集选择器中如果有元素选择器，必须使用元素选择器开头。
   -->
   <style>
      .intersection.red {
        color: red;
      }

      .intersection.red.green {
        font-size: 30px;
        color: yellowgreen;
      }
   </style>
</head>
<body>

  <div class="intersection red">intersection-red</div>
  <div class="intersection green">intersection-green</div>
  <div class="intersection blue">intersection-blue</div>
  <div class="intersection red green">intersection-red-green</div>
  
</body>
</html>